<template>
  <div class="test" ref="body">
    <div class="line" ref="line2"></div>
    <div class="ymd" :style="ymdstyles" ref="ymd">{{ title }}</div>
    <div class="time timediv" :style="timestyles" ref="val">{{ days }}</div>
    <div class="ymd" :style="ymdstyles" ref="ymd2">(天)</div>
    <div class="line" ref="line"></div>
  </div>
</template>
<script>
import dayjs from "dayjs";

import titlemixins from "@/mixins/bigScreen/titlemixins";
import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";

export default {
  name: "runtime",
  mixins: [titlemixins, commonmixins],
  components: {},
  data() {
    return {
      days: 0,
      ymd: "test",
      title: '供热天数'
    };
  },
  computed: {
    linglongstyleses() {
      return {
        height: "100%",
      };
    },
    timestyles() {
      return {
        fontSize: this.scale * 35 + "px",
      };
    },
    ymdstyles() {
      return {
        fontSize: this.scale * 20 + "px",
        color: "#50C9FF",
      };
    },
  },
  watch: {},
  created() {
    this.queryData();
    this.interval = setInterval(() => {
      this.queryData()
    }, 1000 * 60)
  },
  destroyed() {
    cleatInterval(this.interval)
  },
  mounted() {
    this.loadData();
    this.$refs['ymd2'].style.marginLeft = this.getscalepx(10);
    this.$refs['ymd'].style.marginRight = this.getscalepx(10);
    this.$refs['ymd2'].style.marginTop = this.getscalepx(12);
    this.$refs['ymd'].style.marginTop = this.getscalepx(12);
    this.$refs['body'].style.marginTop = this.getscalepx(10);
    this.$refs['line'].style.marginTop = this.getscalepx(12);
    this.$refs['line2'].style.marginTop = this.getscalepx(12);
    this.$refs['line2'].style.marginRight = this.getscalepx(25);
    this.$refs['line'].style.marginLeft = this.getscalepx(25);

    this.$refs['line'].style.height = this.getscalepx(30);
    this.$refs['line2'].style.height = this.getscalepx(30);

    // 字体
    this.$refs['ymd'].style.fontSize = this.getscalepx(25);
    this.$refs['val'].style.fontSize = this.getscalepx(45);
    this.$refs['ymd2'].style.fontSize = this.getscalepx(25);
  },
  methods: {
    loadData() {
      setInterval(() => {
        let aWeekTxt = [
          "周日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "周六",
        ];

        let week = aWeekTxt[Number(dayjs().format("d"))];
        this.ymd = dayjs().format("YYYY年MM月DD日 ");
        this.time = dayjs().format(" HH:mm:ss");
      }, 1000);
    },
    queryData() {
      axios.get('/bigScreen/bigScreen').then(res => {
        console.log(res)
        let year = new Date().getFullYear();
        let dateStart = res.data.filter(v => v.attrName === 'start_date')[0].attrValue.substr(5);
        let dateEnd =  res.data.filter(v => v.attrName === 'end_date')[0].attrValue;
        let now = new Date().getTime();
        let cha = 0;
        if (now > new Date(year + '-' + dateEnd).getTime() && now < new Date(year + '-' + dateStart).getTime()) {
          this.title = '距离供热开始天数';
          cha = new Date(year + '-' + dateStart).getTime() - now;
        } else {
          if (now > new Date(year + '-' + dateStart).getTime()) {
            cha = now - new Date(year + '-' + dateStart).getTime();
          } else {
            cha = now - new Date((year-1) + '-' + dateStart).getTime();
          }
        }
        this.days = Math.ceil(cha / 1000 / 60 / 60 / 24)
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.test {
  display: flex;
}
.line {
  width: 0px;
  border-right: 2px solid #3D93EA;
}
.titletime {
  height: 100%;
}
.timediv {
  font-family: DS-Digital;
  /*font-size:70px;*/
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.ymd {
  float: left;
  text-align: right;
}
.time {
  float: left;
}
</style>